<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }">
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view v-else>
            <view class="pure-top"></view>
            <view class="order-main">
                <view class="top">
                    <view>{{ data.OutTradeNo }}</view>
                    <view class="state">
                        <iconsfont
                            v-show="data.State == 0"
                            class="icon"
                            customIcons="icon-daishenhe withe"
                            size="46"></iconsfont>
                        <iconsfont
                            v-show="data.State == 3"
                            class="icon"
                            customIcons="icon-tuihuozhong withe"
                            size="46"></iconsfont>
                        <iconsfont
                            v-show="data.State == 8"
                            class="icon"
                            customIcons="icon-yibohui withe"
                            size="46"></iconsfont>
                        <iconsfont
                            v-show="data.State == 1"
                            class="icon"
                            customIcons="icon-daituihuo withe"
                            size="46"></iconsfont>
                        <iconsfont
                            v-show="data.State == 7"
                            class="icon"
                            customIcons="icon-yituihuo withe"
                            size="46"></iconsfont>
                        <iconsfont
                            v-show="data.State == 2"
                            class="icon"
                            customIcons="icon-yiquxiao withe"
                            size="46"></iconsfont>
                        <view>{{ data.StateName }}</view>
                    </view>
                </view>
                <view class="product_inventory">
                    <view class="cirle loca_l"></view>
                    <view class="cirle loca_r"></view>
                    <view class="title-text">商品清单</view>
                    <view class="list_info" v-for="(item, index) in Details" :key="index">
                        <image :src="easyGetImgUrl(item.ProductImage)" mode="aspectFill"></image>
                        <view class="list_info_r">
                            <view class="name text-show-line-2">{{ item.ProductName }}</view>
                            <view v-if="item.Attribute">规格：{{ item.Attribute }}</view>
                            <view>货号：{{ item.SkuCode }}</view>
                            <view class="flex-between">
                                <view
                                    >￥{{ item.Price }}×{{ item.Number
                                    }}{{ item.UnitName ? item.UnitName : item.DefaultUnit }}</view
                                >
                                <view
                                    >小计：<text class="numstrong">¥{{ item.Price * item.Number }}</text></view
                                >
                            </view>
                        </view>
                    </view>
                    <view class="list_total">合计：￥{{ data.PriceSum }}</view>
                </view>
                <view class="wuliu_info" v-if="Address">
                    <view class="cirle loca_l"></view>
                    <view class="cirle loca_r"></view>
                    <view>
                        <view class="label">退货物流：</view>
                        <view class="value">{{ Address.ExpressName }}</view>
                    </view>
                    <view>
                        <view class="label">运单号：</view>
                        <view class="value">{{ Address.ExpressNo }}</view>
                    </view>
                </view>
                <view class="wuliu_info">
                    <view>
                        <view class="label">提交时间：</view>
                        <view class="value">{{ data.AddTime }}</view>
                    </view>
                    <view v-show="data.OrderSn && data.OrderSn.length > 0">
                        <view class="label">关联销售单：</view>
                        <view class="value">{{ data.OrderSn }}</view>
                    </view>
                    <view v-if="data.BuyOrderSn">
                        <view class="label">关联采购单：</view>
                        <view class="value">{{ data.BuyOrderSn }}</view>
                    </view>
                    <view v-if="CheckLog && CheckLog.ModifyTime">
                        <view class="label">审核时间：</view>
                        <view class="value">{{ CheckLog.ModifyTime }}</view>
                    </view>
                    <view v-if="CheckLog && CheckLog.Message && data.State == 8">
                        <view class="label">审核意见：</view>
                        <view class="value">{{ CheckLog.Message }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer" v-if="data.State == 0 || data.State == 3">
            <view v-show="data.State == 0" class="all btn" @click="reject">驳回</view>
            <view v-show="data.State == 0" class="btn" @click="click('tongyi')">同意</view>
            <view v-show="data.State == 3" class="all btn" @click="click('quxiao')">取消</view>
            <view v-show="data.State == 3" class="btn" @click="click('affirm')">确认收货</view>
        </view>
        <uni-popup ref="popTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                :content="popTipData.title"
                :before-close="true"
                @close="cancelIt"
                @confirm="doIt"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="popReturnTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>请填写驳回理由</text>
                </view>
                <textarea v-model="checkmessage" placeholder="请填写驳回理由" />
                <view class="pop-action">
                    <view @click="rejectClose">取消</view>
                    <view @click="rejectConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import orderPrice from "@/pages_supplier/components/order/order-price.vue"
import orderStateMenu from "@/pages_supplier/components/order/order-state-menu.vue"
import itemTitleBorder from "@/pages_supplier/components/order/item-title-border.vue"
import {
    GetRefundOrderDetail,
    CheckRefundOrder,
    CompleteRefundOrder,
    CancelRefundOrder,
} from "@/pages_supplier/service/api/buyOrder.js"
export default {
    components: {
        itemTitleBorder,
        orderPrice,
        orderStateMenu,
    },
    data() {
        return {
            isShowBottomBar: false,
            id: 0,
            data: {},
            Address: {},
            Details: [],
            CheckLog: {},
            isLoading: false,
            popTipData: {
                title: "确定要驳回当前退货单?",
                type: 0,
            },
            checkmessage: "",
        }
    },
    watch: {
        //监听更新
        getUpReturnOrderView(e) {
            this.getDetail()
        },
    },
    onLoad(e) {
        this.id = e.id
        this.allPayPic = e.allPayPic
    },
    mounted() {
        this.getDetail()
        this.isShowBottomBar = true
    },
    methods: {
        ...mapMutations(["UP_RETURN_ORDER_VIEW"]),
        getUpReturnOrderView() {
            this.getDetail()
            this.UP_RETURN_ORDER_VIEW(new Date().getTime())
        },
        //获取详情
        getDetail() {
            let path = "?id=" + this.id
            this.isLoading = true
            GetRefundOrderDetail(path).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data.Info
                    if (this.data.OrderSn && this.data.OrderSn.length > 0) {
                        this.data.OrderSn = this.data.OrderSn.join(",")
                    }
                    this.Address = res.Data.Address
                    this.Details = res.Data.Details
                    this.CheckLog = res.Data.CheckLog
                    this.isLoading = false
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        click(type) {
            let item = this.item
            switch (type) {
                case "tongyi":
                    //同意
                    this.popTipData = {
                        type: 1,
                        title: "确定要同意当前退货单?",
                    }
                    this.showTip()
                    break
                case "affirm":
                    //确认收货
                    this.popTipData = {
                        type: 2,
                        title: "确定要确认收货?",
                    }
                    this.showTip()
                    break
                case "quxiao":
                    //取消
                    this.popTipData = {
                        type: 3,
                        title: "当前客户已寄出货品，是否取消订单?",
                    }
                    this.showTip()
                    break

                default:
                    //这里是没有找到对应的值处理
                    break
            }
        },
        doIt() {
            var that = this
            let type = this.popTipData.type
            switch (type) {
                case 1: {
                    //同意
                    let param = {
                        agree: true,
                        id: this.id,
                    }
                    CheckRefundOrder(param).then((res) => {
                        if (res.State == 1) {
                            that.getUpReturnOrderView()
                        }
                    })
                    break
                }
                case 2: {
                    //确认收货
                    let path = "?id=" + this.id
                    CompleteRefundOrder(path).then((res) => {
                        if (res.State == 1) {
                            that.getUpReturnOrderView()
                        }
                    })
                    break
                }
                case 3: {
                    //取消
                    let param = {
                        id: this.id,
                    }
                    CancelRefundOrder(param).then((res) => {
                        if (res.State == 1) {
                            that.getUpReturnOrderView()
                        }
                    })
                    break
                }
                default:
                    break
            }
            this.cancelIt()
        },
        //显示确认弹窗
        showTip() {
            this.$refs.popTip.open()
        },
        //关闭弹窗
        cancelIt() {
            this.$refs.popTip.close()
        },
        reject() {
            this.$refs.popReturnTip.open()
        },
        rejectClose() {
            this.$refs.popReturnTip.close()
        },
        rejectConfirm() {
            if (this.checkmessage == "") {
                this.easyToast("请填写驳回理由")
                return false
            }
            let param = {
                agree: false,
                checkMessage: this.checkmessage,
                id: this.id,
            }
            CheckRefundOrder(param).then((res) => {
                if (res.State == 1) {
                    this.getUpReturnOrderView()
                    this.rejectClose()
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.pure-top {
    width: 100%;
    height: 206rpx;
    position: relative;
    z-index: 0;
    overflow: hidden;

    &:after {
        content: "";
        width: 120%;
        height: 206rpx;
        position: absolute;
        left: -10%; //椭圆左边隐藏10%，右边隐藏10%
        top: 0;
        border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
        background: $app-color-main;
    }
}

.order-main {
    margin: 0 24rpx;
    margin-top: -206rpx;
    border-radius: 8rpx;
    position: relative;
    z-index: 1;
}

.top {
    height: 108rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;

    .state {
        font-size: 36rpx;
        display: flex;
        align-items: center;

        view {
            margin-left: 12rpx;
        }
    }
}

.withe {
    color: #ffffff;
}

.product_inventory {
    background: #ffffff;
    border-radius: 8rpx;
    position: relative;
    border-bottom: 1rpx dashed $uni-border-bottom-color;

    .title-text {
        padding: 0 24rpx;
        font-size: 28rpx;
        height: 88rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        color: $color-gray-1;
        border-bottom: 1rpx solid $uni-border-bottom-color;
    }
}

.list_info {
    padding: 24rpx;
    display: flex;

    .list_info_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 26rpx;
        color: $color-gray-3;

        .name {
            font-size: 26rpx;
            color: $color-gray-1;
        }

        .numstrong {
            font-weight: bold;
            font-size: 28rpx;
            color: $color-gray-1;
        }
    }

    image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        border: 1rpx solid #f4ea71;
        margin-right: 24rpx;
    }
}

.list_total {
    padding: 24rpx;
    font-size: 28rpx;
    color: $app-color-main;
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
}

.wuliu_info {
    position: relative;
    padding: 32rpx 24rpx;
    background: #ffffff;
    border-bottom: 1rpx dashed $uni-border-bottom-color;

    & > view {
        display: flex;
        height: 56rpx;
        align-items: center;
    }

    .label {
        font-size: 28rpx;
        color: #999;
        width: 180rpx;
    }

    .color-gray-light {
        color: $color-gray-3;
    }

    .value {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 28rpx;

        & > view {
            flex: 1;
        }
    }
}

.cirle {
    position: absolute;
    width: 40rpx !important;
    height: 40rpx !important;
    border-radius: 50%;
    background: $uni-bg-color-grey;
}

.loca_l {
    left: -20rpx;
    bottom: -20rpx;
    z-index: 10;
}

.loca_r {
    right: -20rpx;
    bottom: -20rpx;
    z-index: 10;
}
.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
        width: 304rpx;
        height: 80rpx;
        background: $app-color-main;
        border-radius: 40rpx;
        font-size: 28rpx;
        color: #ffffff;
        margin: 0 23rpx;
    }
    .all {
        background: #ffffff;
        border: 1rpx solid #222a42;
        height: 76rpx;
        color: #222a42;
    }
}
</style>
